前幾篇我們從宏觀的角度來探討 Block Theme：範本階層、theme.json、全站編輯，這篇聚焦在微觀的角度，探討到 Block Theme 的最小單位。因為有個問題如果不先搞懂，後面第三部實作區塊時你會一直卡：一個可以在後台被滑鼠點擊可以直接打字修改的區塊，它到底是 HTML？是欄位？還是別的東西？

理解這件事最好的切入點，是一個叫 RichText 的工具。

傳統編輯器的世界是一大塊 HTML

先回憶傳統佈景主題怎麼處理內容。你在傳統編輯器（Classic Editor）裡打字、貼圖、加粗，最後存進資料庫的是一整坨 HTML 字串，塞在 wp_posts 的 post_content 欄位，這坨 HTML 沒有結構可言，標題、段落、圖片全部混在同一條字串裡，靠 <h2>、<p> 這些標籤勉強區分。

想針對「某一段」做點什麼很困難，因為在資料庫眼裡，整篇文章就是一個大字串，沒有「這是第三段」、「那是一張圖」這種邊界。傳統主題要做結構化的內容，通常得靠 ACF 之類的外掛額外開欄位存，間接證明了「傳統編輯器本身無法設計出結構化內容」這件事。

區塊編輯器的世界是有邊界的元件

區塊編輯器（Block Editor）把這坨 HTML 打散成獨立有邊界的區塊。每一段文字、每一張圖、每一個按鈕，都是獨立的區塊，各自帶著自己的資料和設定。

存進資料庫的還是 post_content，但內容變成帶註解的結構：

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">今天的主題</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>這是一段內文。</p>
<!-- /wp:paragraph -->

那些 <!-- wp:xxx --> 註解就是邊界。WordPress 靠它們知道「這是一個標題區塊、那是一個段落區塊」，於是每一顆區塊都能被單獨選取、單獨設定、單獨搬移，這是傳統編輯器那坨 HTML 無法實現的功能。

RichText：可以就地編輯的那個「格子」

那使用者在區塊裡「直接打字」的能力，是哪來的？這就是 RichText 的角色。

RichText 是 Block 開發裡一個核心的元件。你可以把它想成區塊內部一個「可以就地編輯的文字格子」，使用者點進去能打字、能選字加粗、能插超連結，而且改的當下就直接反映在畫面上，不用切換到什麼設定欄位。段落區塊的內文、標題區塊的標題文字、按鈕區塊的按鈕文字，底層都是一個 RichText。

拿傳統主題類比，這是最大的體感差異。傳統主題如果你想讓客戶改一段標題，通常做法是：ACF 開一個文字欄位，客戶到右側或另一個頁面填字，前台再用 the_field() 撈出來顯示。編輯的位置和顯示的位置是分開的，RichText 把這兩件事合而為一，客戶在哪裡看到文字，就在哪裡點下去改。

這個「就地編輯」的體驗，是 Block Theme 對客戶最有感的賣點之一，也是第三部份我們做自訂區塊時會反覆用到的元件。

區塊有哪幾種？先建立分類認知

不是每個區塊都長一樣。先建立一個粗略的分類，後面才不會混：

這張表你現在不用背，只要先有個感覺：區塊有「內容寫死的靜態區塊」和「內容即時查資料的動態區塊」兩大世界，對應到傳統佈景主題的寫死內容與 WP Query。

一個觀念上的校正

很多從傳統主題過來的人，會下意識把區塊理解成「一段包好的 HTML」，這個理解只對了一半，區塊確實會輸出 HTML，但它同時還帶著結構化的屬性資料（attributes），一張圖片區塊不只存 <img> 標籤，還存了對齊方式、尺寸、連結目標這些欄位。這就是為什麼區塊能被工具列的按鈕即時調整，而傳統 HTML 不行。

把區塊看成「HTML 外殼 + 結構化屬性」這一組東西就抓到重點了，至於這些屬性怎麼存、內容寫死和即時查資料差在哪，下一篇我們會正式進入靜態 Block 與動態 Block 的對照，並且把它跟你熟悉的 ACF 放在一起看。

文章目錄：https://oberonlai.blog/category/2026-ithome/